<template>
    <div>
        <OAMain title="添加员工">
            <el-card>
                <el-form :model="form" :rules="rules" ref="RefForm" label-width="100px">
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realname">
                        <el-input v-model="form.realname" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-input readonly disabled :placeholder="authStore.user.department.name"></el-input>
                    </el-form-item>
                    <el-form-item label="领导">
                        <el-input readonly disabled
                            :placeholder="'[' + authStore.user.email + ']' + authStore.user.realname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </OAMain>
    </div>
</template>

<script setup name="AddStaff">
import OAMain from '@/components/OAMain.vue';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '@/stores/auth';
import staffHttp from '@/api/staffHttp';

const authStore = useAuthStore();
const router = useRouter();

let RefForm = ref();
let form = reactive({
    email: "",
    realname: "",
    password: "",
});
let rules = {
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    realname: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ]
};

const onSubmit = () => {
    RefForm.value.validate(async (valid) => {
        if (valid) {
           try{
            await staffHttp.addStaff(form.realname, form.email, form.password)
            ElMessage.success('添加成功');
            router.push({ name: 'staff' });
           }catch(detail){
             ElMessage.error(detail);
           }
        }
    });
}
</script>

<style scoped></style>